<!-- 在建项目、意向项目、完结项目 -->
<template>
  <div class="content">
    <el-card class="box-card">
      <el-tabs v-model="activeName">
        <el-tab-pane label="在建项目" name="first">
          <div class="con-box" style="display: flex;">
            <div class="left">
              <el-input placeholder="请输入关键字" v-model="keWords1"></el-input>
              <el-tree
                class="filter-tree"
                :data="data"
                :props="defaultProps"
                default-expand-all
                :filter-node-method="filterNode"
                ref="tree">
              </el-tree>
            </div>
            <div class="right">
              <el-table :data="conTableData" height="250" border style="width: 100%" :header-cell-style="{backgroundColor: '#DAF6E2'}">
                <el-table-column type="selection" width="55"></el-table-column>
                <el-table-column prop="projectName" label="项目名称"></el-table-column>
                <el-table-column prop="projectCode" label="项目编号"></el-table-column>
                <el-table-column prop="projectType" label="项目类型"></el-table-column>
                <el-table-column prop="header" label="项目负责人"></el-table-column>
                <el-table-column prop="startDate" label="立项日期"></el-table-column>
                <el-table-column prop="endDate" label="计划结束日期"></el-table-column>
                <el-table-column label="操作" width="200">
                  <el-button type="text" icon="el-icon-news" @click="pushToNotice">整改通知</el-button>
                  <el-button type="text" icon="el-icon-notebook-2" @click="pushToNotice2">奖惩通报</el-button>
                </el-table-column>
              </el-table>
              <el-pagination
                background
                layout="prev, pager, next"
                :total="1000"
                style="float: right; margin-top: 20px;"
              >
              </el-pagination>
            </div>
          </div>
        </el-tab-pane>
        <el-tab-pane label="意向项目" name="second">
          <el-table :data="intTableData" height="250" border style="width: 100%" :header-cell-style="{backgroundColor: '#DAF6E2'}">
                <el-table-column type="selection" width="55"></el-table-column>
                <el-table-column prop="projectName" label="项目名称"></el-table-column>
                <el-table-column prop="projectType" label="项目类型"></el-table-column>
                <el-table-column prop="projectDep" label="项目部门"></el-table-column>
                <el-table-column prop="reason" label="事由及说明"></el-table-column>
              </el-table>
              <el-pagination
                background
                layout="prev, pager, next"
                :total="1000"
                style="float: right; margin-top: 20px;"
              >
              </el-pagination>
        </el-tab-pane>
        <el-tab-pane label="完结项目" name="third">
          <div class="con-box" style="display: flex;">
            <div class="left">
              <el-input placeholder="请输入关键字" v-model="keWords1"></el-input>
              <el-tree
                class="filter-tree"
                :data="data"
                :props="defaultProps"
                default-expand-all
                :filter-node-method="filterNode"
                ref="tree">
              </el-tree>
            </div>
            <div class="right">
              <el-table :data="finTableData" height="250" border style="width: 100%" :header-cell-style="{backgroundColor: '#DAF6E2'}">
                <el-table-column type="selection" width="55"></el-table-column>
                <el-table-column prop="projectName" label="项目名称"></el-table-column>
                <el-table-column prop="projectCode" label="项目编号"></el-table-column>
                <el-table-column prop="projectType" label="项目类型"></el-table-column>
                <el-table-column prop="header" label="项目负责人"></el-table-column>
                <el-table-column prop="startDate" label="实际开始"></el-table-column>
                <el-table-column prop="endDate" label="实际结束"></el-table-column>
                <el-table-column prop="duration" label="实际工期"></el-table-column>
                <el-table-column prop="status" label="项目状态"></el-table-column>
                <el-table-column label="操作" width="200">
                  <el-button type="text" icon="el-icon-news" @click="pushToNotice">整改通知</el-button>
                  <el-button type="text" icon="el-icon-notebook-2" @click="pushToNotice2">奖惩通报</el-button>
                </el-table-column>
              </el-table>
              <el-pagination
                background
                layout="prev, pager, next"
                :total="1000"
                style="float: right; margin-top: 20px;"
              >
              </el-pagination>
            </div>
          </div>
        </el-tab-pane>
      </el-tabs>
    </el-card>
  </div>
</template>

<script>
export default {
  data() {
    return {
      activeName: 'first',
      keWords1: '',
      data: [
        {
          id: 1,
          label: '项目类型',
          children: [
            {
              id: 4,
              label: '防沙治沙',
            },
            {
              id: 4,
              label: '植树造林',
            },
            {
              id: 4,
              label: '绿化改造',
            },
            {
              id: 4,
              label: '机器人造林',
            },

        ]
        }
      ],
      defaultProps: {
        children: 'children',
        label: 'label'
      },
      // 在建项目
      conTableData: [
        {
          projectName: '风光一体化防沙治沙',
          projectCode: 'GCX20221012',
          projectType: '防沙治沙',
          header: '郝XX',
          startDate: '2022-08-08',
          endDate: '2022-09-08'
        },{
          projectName: '三北六期',
          projectCode: 'GCX20221012',
          projectType: '工程项目',
          header: '郝XX',
          startDate: '2022-08-08',
          endDate: '2022-09-08'
        },{
          projectName: '蚂蚁森林',
          projectCode: 'GCX20221012',
          projectType: '工程项目',
          header: '郝XX',
          startDate: '2022-08-08',
          endDate: '2022-09-08'
        },{
          projectName: '蓝旗机器人造林',
          projectCode: 'GCX20221012',
          projectType: '工程项目',
          header: '郝XX',
          startDate: '2022-08-08',
          endDate: '2022-09-08'
        }
      ],
      // 意向项目
      intTableData: [
        {
          projectName: '蓝旗机器人造林',
          projectType: '工程项目',
          projectDep: '开发部',
          reason: '蓝旗机器人造林',
        },{
          projectName: '蚂蚁森林',
          projectType: '工程项目',
          projectDep: '开发部',
          reason: '蚂蚁森林工作',
        },{
          projectName: '三北六期',
          projectType: '工程项目',
          projectDep: '开发部',
          reason: '三北六期',
        },{
          projectName: '风光一体化防沙治沙',
          projectType: '工程项目',
          projectDep: '开发部',
          reason: '风光一体化防沙治沙',
        }
      ],
      // 完结项目
      finTableData: [
        {
          projectName: '风光一体化防沙治沙',
          projectCode: 'GCX20221012',
          projectType: '工程项目',
          header: '郝XX',
          startDate: '2022-08-08',
          endDate: '2022-09-08',
          duration: '75',
          status: '完成'
        },{
          projectName: '三北六期',
          projectCode: 'GCX20221012',
          projectType: '工程项目',
          header: '郝XX',
          startDate: '2022-08-08',
          endDate: '2022-09-08',
          duration: '0',
          status: '终止'
        },{
          projectName: '蚂蚁森林',
          projectCode: 'GCX20221012',
          projectType: '工程项目',
          header: '郝XX',
          startDate: '2022-08-08',
          endDate: '2022-09-08',
          duration: '0',
          status: '终止'
        },{
          projectName: '蓝旗机器人造林',
          projectCode: 'GCX20221012',
          projectType: '工程项目',
          header: '郝XX',
          startDate: '2022-08-08',
          endDate: '2022-09-08',
          duration: '0',
          status: '终止'
        }
      ],
    }
  },
  watch: {
    keWords1(val) {
      this.$refs.tree.filter(val);
    }
  },
  mounted() {

  },
  methods: {
    filterNode(value, data) {
      if (!value) return true;
      return data.label.indexOf(value) !== -1;
    },
    // 整改通知
    pushToNotice() {
      const routeData = this.$router.resolve({path: '/manager/testImgShow', query: {type: 'notice'}})
      window.open(routeData.href,'_blank')
    },
    // 奖惩通报
    pushToNotice2() {
      const routeData = this.$router.resolve({path: '/manager/testImgShow', query: {type: 'report'}})
      window.open(routeData.href,'_blank')
    }
  }
}
</script>

<style lang="scss" scoped>
.box-card {
  margin-bottom: 20px;
  height: 400px;
  .con-box {
    display: flex;
    .left {
      width: 200px;
    }
    .right {
      flex: 1;
      margin-left: 20px;
    }
  }
}
</style>
